<template>
	<view class="page">
		<view class="content">
			<view class="institutionList">
				<view class="institution_title">
					{{insInformation.institution}}
				</view>
				<view class="institution_logo">
					<image :src="insInformation.avatarUrl" mode=""></image>
				</view>
				<view class="institution_info">
					<view class="institution_content">
						{{insInformation.insIntroduction}}
					</view>
					<view class="institution_more">
						<view>
							<view style="width: 200rpx;float: left;">
								<p>{{insInformation.phone}}</p>
								<!-- <p>{{item.startTime}} - {{item.endTime}}</p> -->
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="picture">
				<view class="picture_title">
					图集
				</view>
				<view class="picture_content">
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
						<view v-for="(item,index) in insInformation.imageUrl" :key="index" id="index" class="picture_item">
							<image :src="item" mode=""></image>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk'
	export default {
		data() {
			return {
				_id: '',
				insInformation: {
					address: '',
					location: {},
					auth: '',
					avatarUrl: 'cloud://inspace-v1.696e-inspace-v1-1302892928/institutionImage/logo2.png',
					fileList: [],
					imageUrl: [],
					insIntroduction: '',
					institution: '',
					type: '',
					phone: ''
				},

				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		onLoad(option) {
			this._id = option.id;
			// console.log(this._id);
			this.getInformation();
		},
		methods: {
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			getInformation: function() {
				cloudbase.database().collection('institution').where({
					_id: this._id
				}).get().then(res => {
					// console.log(res);
					let list = res.data;
					if (list.length != 0) {
						this.insInformation = list[0];
						if(list[0].fileList.length != 0) { 
							this.getUrl();
							console.log(this.insInformation);
						}
					}
				})
			},
			getUrl: function() {
				let that = this;
				if(that.insInformation.fileList){ 
					// that.insInformation.imageUrl = [];
					cloudbase.getTempFileURL({
						fileList: that.insInformation.fileList
					}).then(res => {
						// console.log(res);
						let list = res.fileList;
						list.forEach(v => {
							console.log(v);
							that.insInformation.imageUrl.push(v.tempFileURL);
						})
						// console.log(that.insInformation.imageUrl)
					})
				}
			}
		}
	}
</script>

<style>
	.page {
		width: 750rpx;
		height: 1812rpx;
		/* height: 1020rpx; */
		/* padding-bottom: 60px; */
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #F3F5F7;
	}

	.content {
		width: 702rpx;
		height: 100%;
		background-color: #FFFFFF;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 5px 15px rgba(0, 0, 0, .09);
		box-sizing: border-box;
		margin-top: 20rpx;
		margin-left: auto;
		margin-right: auto;
	}

	/* 附近的机构 */
	.institutionList {
		width: 702rpx;
		height: 260rpx;
		padding: 40rpx;
	}

	.institution_title {
		width: 100%;
		height: 40rpx;
		font-size: 35rpx;
		line-height: 40rpx;
		font-weight: 800;
	}

	.institution_logo {
		width: 144rpx;
		height: 260rpx;
		float: left;
		/* background-color: #007AFF; */
	}

	.institution_logo image {
		width: 144rpx;
		height: 144rpx;
		margin-top: 10rpx;
		border-radius: 50%;
	}

	.institution_info {
		width: 516rpx;
		height: 260rpx;
		float: left;
		font-size: 24rpx;
		padding: 20rpx;
		box-sizing: border-box;
		/* background-color: #0000FF; */
	}

	.institution_content {
		width: 476rpx;
		height: 120rpx;
		font-size: 24rpx;
		line-height: 30rpx;
		color: #666666;
		/* 多行显示+超出部分省略号替代 */
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	.institution_more {
		width: 476rpx;
		height: 100rpx;
		color: #999999;
		/* background-color: #0000FF; */
	}

	.picture {
		width: 100%;
		height: 400rpx;
		padding: 40rpx;
		box-sizing: border-box;
		/* background-color: #0000FF; */
	}

	.picture_title {

		font-size: 35rpx;
		line-height: 40rpx;
		font-weight: 800;
	}

	.picture_content {
		width: 100%;
		height: 280rpx;
		/* background-color: #121111; */
	}

	.scroll-view_H {
		margin-top: 20rpx;
		white-space: nowrap;
		width: 100%;
	}

	.picture_item {
		width: 250rpx;
		height: 250rpx;
		display: inline-block;
		margin-right: 10rpx;
	}
	.picture_item image{
		width: 250rpx;
		height: 250rpx;
	}

	.addButton {
		float: right;
		background-color: #FD973F !important;
		border-radius: 20px;
		color: #FFFFFF !important;
	}

	.button-hover {
		background-color: rgba(0, 0, 0, 0.1) !important;
		opacity: 0.7;
	}
</style>
